<template>
  <div>
    <!-- 图文聊天有结束时间，查看是否过期 -->
	  <div class="bg" :style="{'background-color':bgColor}">
          <span :class="['first',{'sink':isFull}]" :style="{'background-color':firstBg,'transform':'Rotate('+firstRotate+'deg)'}"></span>
          <span :class="['second',{'sink':isFull}]" :style="{'transform':'Rotate('+secondRotate+'deg)'}"></span>
          <div class="third"></div>
      </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          firstRotate: 0,
          secondRotate: 0,
          firstBg: '#ebebeb',
          bgColor: '#ff9c07',
          isFull:false
      }
    },
    props: {
        value:String | Number
    },
    mounted () {
        this.isFull = false
        if (this.value*1 === 0) {
            this.bgColor = '#ebebeb'
        } else if (this.value*1 === 1) {
            this.bgColor = '#ff9c07'
            this.isFull = true
        }
        if (this.value*360 > 180) {
            this.firstBg = '#ff9c07'
            this.secondRotate  = 180 -(this.value*1) * 360
        } else {
            this.firstRotate = - (this.value*360)
        }
        console.log()
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
.bg {
    height: 40rpx;
    width: 40rpx;
    border-radius: 20rpx;
    background-color: '#ff9c07';
    box-sizing: border-box;
    position: relative;
    span {
        box-sizing: border-box;
    }
    .first {
        display: inline-block;
        height: 40rpx;
        width: 20rpx;
        // background-color: #ebebeb;
        border-radius: 20rpx 0 0 20rpx;
        top: 0;
        left: 0;
        transform-origin: center right;
        position: absolute;
        transform: rotate(0deg);
        z-index: 2;
    }
    .second {
        display: inline-block;
        height: 40rpx;
        width: 20rpx;
        background-color: #ebebeb;
        border-radius: 0 20rpx 20rpx 0;
        position: absolute;
        top: 0;
        right:0;
        transform-origin: left center;
        transform: rotate(0deg);
        z-index: 1;
    }
    .third {
        display: inline-block;
        height: 26rpx;
        width: 26rpx;
        background-color: #fff;
        border-radius: 12rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index: 3;
    }
    .sink {
        z-index: -1;
    }
}
</style>
